<template>
	<view>
		<page-head :title="title"></page-head>
		<view class="page-body">
			<view class="page-body-wrapper">
				<view class="choose-image" @click="chooseImage">点击图片上传</view>
				<!-- #ifndef APP-PLUS || H5 -->
				<canvas canvas-id="myCanvas" id="myCanvas" class="canvas"></canvas>
				<!-- #endif -->
			</view>
		</view>
	</view>
</template>

<script>
const ctx = uni.createCanvasContext('myCanvas');

export default {

	data() {
		return {

		};
	},
	methods: {
		chooseImage: function () {
			let that = this;

			console.log(111111)
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: function (res) {
					console.log(JSON.stringify(res.tempFilePaths));
					uni.getImageInfo({
						src: res.tempFilePaths[0],
						success: function (image) {
							console.log(image.width);
							console.log(image.height);
							uni.getSystemInfo({
								success: function (sys) {
									console.log(sys.windowWidth)
									let height = sys.windowWidth / image.width * image.height;
									ctx.drawImage(res.tempFilePaths[0], 0, 0, sys.windowWidth, height);
									ctx.draw()
								}
							});
						}
					});


				}
			});
		}
	}
}
</script>

<style lang="scss">
.page-body-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	.choose-image {
		display: block;
		padding: 10rpx 15rpx;
		background-color: aquamarine;
		text-align: center;
	}

	#myCanvas {
		display: inline-block;
		width: 100vw;
		min-height: 90vh;
	}
}
</style>
